<template>
  <div class="home">
    <div class="box">
      <!-- 头部-->
      <div class="t">
        <img src="../../public/1.jpg" alt="" class="img" />
      </div>
      <!-- input框区域 -->
      <inpp :counter="counter" @add="add" />
      <div v-if="store.user.length > 0">
        <!-- 内容区域 -->
        <body1 @del="del" />
        <!-- 底部区域-->
        <db @wei="wei" @delmore="delmore" />
      </div>
      <div v-else class="zan">暂无数据哦!</div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
//引入定义的数据
import { userInfo } from '@/stores/userInfo'
import inpp from '../components/inp.vue'
import body1 from '../components/body.vue'
import db from '../components/db.vue'
export default {
  components: {
    inpp,
    db,
    body1
  },
  setup(props) {
    //调用方法
    const store = userInfo()
    const obj = reactive({
      userInfo: []
    })
    // 添加的方法
    const add = (obj) => {
      let addObj = {
        counter: obj.counter,
        checked: false
      }
      store.add(addObj)
      obj.counter = ''
    }
    // 删除的方法
    const del = (index) => {
      store.del(index)
    }
    // 删除更多
    const delmore = () => {
      store.delmore()
    }
    // 显示
    const wei = (flag) => {
      console.log('flag父', flag)
      store.wei(flag)
    }
    return {
      ...toRefs(obj),
      add,
      store,
      del,
      delmore,
      wei
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 735px;
  background-color: #ffb5b3;
  box-sizing: border-box;
  .box {
    width: 30%;
    min-height: 460px;
    background-color: #f2f2f2;
    border-radius: 15px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .t {
      width: 100%;
      height: 150px;
      margin-top: 60px;
      .img {
        width: 50%;
        height: 100%;
        margin-left: 125px;
      }
    }
    .zan {
      text-align: center;
      width: 100%;
      margin-top: 55px;
    }
  }
}
</style>
